<!DOCTYPE HTML>
<html>
	<head>
	<meta charset=utf-8>
	<title>Limitless Framework by Jon "Limitless" Long - Demo Page</title>
	
	<!-- Required jQuery Code -->
	<script src="js/modernizr-1.7.min.js"></script>	<!-- Run HTML5/CSS3 in Older Browsers -->
	<script src="js/jquery-1.8.0.min.js"></script>	<!-- Latest jQuery -->
	
	<!-- CSS Stylesheets -->
	<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen"/> <!-- Reset from html5doctor.com -->
	<link rel="stylesheet" type="text/css" href="css/common.css" media="screen"/> <!-- Common Elements -->
	<link rel="stylesheet" type="text/css" href="css/font.css" media="screen"/> <!-- Fonts -->
	<link rel="stylesheet" type="text/css" href="css/color.css" media="screen"/> <!-- Colors -->
	<link rel="stylesheet" type="text/css" href="css/grid.css" media="screen"/> <!-- Grid System -->
	<link rel="stylesheet" type="text/css" href="css/form.css" media="screen"/> <!-- Forms -->
	<link rel="stylesheet" type="text/css" href="css/table.css" media="screen"/> <!-- Tables -->
	<link rel="stylesheet" type="text/css" href="css/css3.css" media="screen"/> <!-- CSS3 -->
	<!-- Note: Mobile.CSS is not attached since this is not a mobile demo. -->
	
	<!-- Styling Only for Demo Page -->
	<style>
		.grid_color { border-bottom: 1px #CCC solid; margin: 10px 0;  }
	</style>
	<!--[if gte IE 9]>
	  <style type="text/css">
		.gradient {
		   filter: none;
		}
	  </style>
	<![endif]-->
	</head>
	
	<body>
	<div class="container_12" />
		<div class="grid_12 logo san_serif shadow round_bottom banner align_center bg_grey white gradient_lighten_top border_solid border_black bump_up" />
			Limitless Framework
		</div>
		<hr class="grid_12 clear" />
		<div class="grid_7" />
			<h1> This is an H1 </h1>
			<h2> This is an H2 </h2>
			<h3> This is an H3 </h3>
			<h4> This is an H4 </h4>
			<h5> This is an H5 </h5>
			<h6> This is an H6 </h6>
			<br />
			<p>
				<span class="circle">F</span>irst thing everyone needs to know about Limitless Framework is that its free. Released in many formats and broken down so you can use it all right away without modification, or just use what you want with editing. It is a CSS driven framework for designing websites quickly. Say if you want to add something like this box below its a matter of typing the presents how you like then paste your content.
				<blockquote class="round_bottom border_black border_solid bg_grey gradient_fade_center_out">This is a blockquote with class set to "round_bottom border_black border_solid bg_grey gradient_fade_center_out" from the Limitless Framework instead of 15 lines of code. <br /><br /> Most of this is self-explanatory which makes it easier to learn and remember when your creating a website.</blockquote>
				</p>
				All code in Limitless Framework has a formatted structure to use as such:
				<br />
				<code />
				first_of_something { code: #value; }
				</code> 
			</p>
			<hr class="dash" />
			<p>
				<div class="date_box">
				  <span class="day">31</span>
				  <span class="month">June</span>
				  <span class="year">2012</span>
				</div>
				Some of the features in Limitless Framework change per browser like the date_box as you see to the right or do not exist on some browsers and will not show. The upside and downside of both can be weighed easy of giving some users a difference experience. Rest assured that all code in Limitless Framework is documented to what code matches to browsers and what version they work on. Most of the code that does is not cross-compatiable is the newest developmental languages such as HTML5 and CSS3 and is updated regularly.
			</p>
		</div>
		<div class="grid_5" />
            <h2>Why use Limitless Framework?</h2>
            <ul>
                <li>Completely Free</li>
                <li>Faster Website Making</li>
				<li>Easily Customizable</li>
				<li>Fully Documented</li>
				<li>Download the full framework or just what you want to use.</li>
            </ul>	
            <h2>Element Styling</h2>	
            <p>
                    <abbr title="title">abbreviation</abbr><br />
                    <strong>strong</strong><br />
                    <em>emphasis</em><br />
                    <b>bold text</b><br />
                    <i>italic text</i><br />
                    <cite>cite</cite><br />
                    <small>small text</small><br />
                    <big>big text</big><br />
                    <del>deleted text</del><br />
                    <ins>inserted text</ins><br />
                    <dfn>defining instance</dfn><br />
                    <kbd>user input</kbd><br />
                    <samp>sample output</samp><br />
                    <q>inline quotation</q> <br />
                    <sub>subscript</sub> and <sup>superscript</sup><br />
                    <var>a variable</var>
            </p>
			<table class="border_solid border_grey">
				<caption>Caption</caption>
				<thead>
					<tr>
						<th colspan="3" class="bg_grey">This is a Table</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>Content</td>
						<td>Content</td>
						<td>Content</td>
					</tr>
					<tr class="bg_lgrey">
						<td>Content</td>
						<td>Content</td>
						<td>Content</td>
					</tr>
					<tr>
						<td>Content</td>
						<td>Content</td>
						<td>Content</td>
					</tr>
				</tbody>
				<tfoot>
					<tr>
						<td colspan="3" class="bg_grey">Tables are fully editable.</td>
					</tr>
				</tfoot>
			</table>
		</div>
		<hr class="grid_12 clear" />
		<div class="grid_12" />
			<h2> 960px Grid System | 100% Grid System | Common Use Grid </h2>
			Let me explain each grid system that is in <b>Limitless Framework</b> for best use. <br />
			<ul>
				<li>
				960px Grid System uses two column types, 12 and 16, when each added up should make the total grids used. <br />
				(<i>Example</i>: a grid_3 and a grid_9 in a container_12 would make a full 960px column.)
				</li>
				<li>
				100% Grid System uses only precentages but work on the same basis of the 12 column and 16 column layouts except the fact its a full page flexible layout.<br />
				(<i>Example</i>: a grid_4 and a grid_8 in a container_12p, notice the p for percent, will give you a full page column flexible layout.)
				</li>
				<li>
				Common Use Grid was based on the needs of the new web designer of today. We want the traditional header, footer, sidebar, and content area but flexible to be used on any device.<br />
				(<i>Example</i>: column_left, column_center, column_right in a container_column makes a full page flexible layout with sidebars on each side of 20% and content area changing.)
				</li>
				<li class="italic">
				Note: The 960px Grid System and the 100% Grid System uses all the same coding, the only difference to change between the two is the container indentifier.
				</li>
			</ul>
		</div>
		<div class="grid_1 grid_color align_center black" />	
			Grid 1
		</div>
		<div class="grid_11 grid_color align_center black" />	
			Grid 11
		</div>
		<div class="grid_2 grid_color align_center black" />	
			Grid 2
		</div>
		<div class="grid_10 grid_color align_center black" />	
			Grid 10
		</div>
		<div class="grid_3 grid_color align_center black" />	
			Grid 3
		</div>
		<div class="grid_9 grid_color align_center black" />	
			Grid 9
		</div>
		<div class="grid_4 grid_color align_center black" />	
			Grid 4
		</div>
		<div class="grid_8 grid_color align_center black" />	
			Grid 8
		</div>
		<div class="grid_5 grid_color align_center black" />	
			Grid 5
		</div>
		<div class="grid_7 grid_color align_center black" />	
			Grid 7
		</div>
		<div class="grid_6 grid_color align_center black" />	
			Grid 6
		</div>
		<div class="grid_6 grid_color align_center black" />	
			Grid 6
		</div>
		<div class="grid_4 grid_color align_center black" />	
			Grid 4
		</div>
		<div class="grid_4 grid_color align_center black" />	
			Grid 4
		</div>
		<div class="grid_4 grid_color align_center black" />	
			Grid 4
		</div>
		<div class="grid_3 grid_color align_center black" />	
			Grid 3
		</div>
		<div class="grid_3 grid_color align_center black" />	
			Grid 3
		</div>
		<div class="grid_3 grid_color align_center black" />	
			Grid 3
		</div>
		<div class="grid_3 grid_color align_center black" />	
			Grid 3
		</div>
		<hr class="grid_12 clear" />
		<form class="grid_6">
			<fieldset class="column_double" />	
				<legend>Double Column</legend>
				<span>
					<label for="email">email</label>
					<input type="email" id="email" required="required" class="box_shadow"  />
				</span>
				<span>
					<label for="phone">phone</label>
					<input type="number" id="phone" required="required" class="box_shadow" min="10" />
				</span>
				<span>
					<label for="name">name</label>
					<input type="text" id="name" class="box_shadow" />
				</span>
				<span>
					<label for="url">url</label>
					<input type="url" id="url" class="box_shadow" />
				</span>
				<input type="submit" value="Submit" />
			</fieldset>
		</form>
		<form class="grid_6">
			<fieldset class="column_single">	
				<legend>Single Column</legend>
				<span>
					<label for="email">email</label>
					<input type="email" id="email" required="required" class="box_shadow"  />
				</span>
				<span>
					<label for="phone">phone</label>
					<input type="number" id="phone" required="required" class="box_shadow" min="10" />
				</span>
				<span>
					<label for="name">name</label>
					<input type="text" id="name" class="box_shadow" />
				</span>
				<span>
					<label for="url">url</label>
					<input type="url" id="url" class="box_shadow" />
				</span>
				<label> 
					<input type="submit" value="Submit" />
				</label>
			</fieldset>
		</form>
		<hr class="grid_12 clear" />
		<div class="grid_4 align_left grid_first" />
			<a href="http://secure.hostgator.com/~affiliat/cgi-bin/affiliates/clickthru.cgi?id=jonlimit" alt="Hostgator.com" />Hosted by HostGator</a>
		</div>
		<div class="grid_4 align_center" />
			<a href="http://jonlimitless.com/framework" alt="Limitless Framework Homepage" />Limitless Framework</a> by 
			<a href="http://jonlimitless.com/" alt="Authors Website">Jon Long</a>
		</div>
		<div class="grid_4 align_right grid_last" />
			Licensed under 	<a href="http://www.gnu.org/copyleft/gpl.html" alt="GNU GPL" />GPL</a> & 
			<a href="http://creativecommons.org/licenses/by/3.0/deed.en_US" alt="Creative Commons" />CC</a>
		</div>
	</div>
	</body>
</html>